<template>
  <div class="back_ground">
  <form class="form">
    <div class="title">Personal Center<br><span>~speaking in the silence~</span></div>
    <div class="input-text">
      <input class="input" id="name" :placeholder="pname" v-model="name" >
      <input class="input" id="email" :placeholder="pemail" v-model="email">
      <input class="input"  id="password" :placeholder="ppassword" v-model="password">
      <div class="button-bag">
        <button class="button-back" @click="nextpage">← back</button>
        <button type="button" class="button-confirm" @click="modify1">Modify →</button>
      </div>
    </div>
  </form>
  </div>
</template>

<script>
import {ElMessage} from "element-plus";

export default {
  //:placeholder="password"
  name: "usercenter_page",
  data(){
    return{
      name:"",
      email:"",
      password:"",
      pname:"",
      pemail:"",
      ppassword:"",
    }
  },
  methods:{
    warning(mes) {
      ElMessage({
        showClose: true,
        message: mes,
        type: "warning",
      });
    },
    modify()
    {
      console.log(this.name,this.email,this.password)
    },
    modify1() {
      const params = new URLSearchParams();
      params.append("name", this.name);
      params.append("email", this.email);
      params.append("password", this.password);
      console.log(this.name,this.email,this.password)
      this.axios
          .post("http://127.0.0.1:8000/update/",params)
          .then((res) => {
            if (res.data.success) {
              ElMessage({
              showClose: true,
              message: "修改成功",
              type: "success",
            });
              this.pname = "Name:"+res.data.data['name'];
              this.pemail = "Email:"+res.data.data['email'];
              this.ppassword = "Password:"+res.data.data['password'];
              this.name = ""
              this.email = ""
              this.password = ""
            } else {
              this.warning(res.data.message);
            }
          })
          .catch((error) => {
            console.error(error);
          });
    },
    nextpage() {
      console.log("seccess");
          this.$router.push({
            path: "/login_signup",
          });
    },

    refresh(){
      this.axios
            .get("http://127.0.0.1:8000/message/")
            .then((res) => {
              if (res.data.success) {
                this.pname = "Name:"+res.data.data.name;
                this.pemail = "Email:"+res.data.data.email;
                this.ppassword= "Password:"+res.data.data.password;
              }
            })
            .catch((error) => {
              console.error(error);
            });

    },
   },

  mounted() {
    // this.pname = "Name:"+this.$route.query.name;
    // this.pemail = "Email:"+this.$route.query.email;
    // this.ppassword = "Password:"+this.$route.query.passwd;
    this.refresh()
  }
}
</script>

<style scoped>
.back_ground{
  position: relative;
  background-image: url('../statics/bg.jpg');
  background-size: cover;
  height:100vh;/* 设置背景的高度 */
  display: flex;
  justify-content: center;
  align-items: center;
}
.form {
  height: 70%;
  width: 30%;
  --input-focus: #2d8cf0;
  --font-color: #323232;
  --font-color-sub: #666;
  --bg-color: beige;
  --main-color: black;
  padding: 20px;
  background: lightblue;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  border-radius: 5px;
  border: 2px solid var(--main-color);
  box-shadow: 4px 4px var(--main-color);
  z-index: 20;
}

.title {
  color: var(--font-color);
  font-weight: 900;
  font-size: 20px;
  margin-bottom: 25px;
}

.title span {
  color: var(--font-color-sub);
  font-weight: 600;
  font-size: 17px;
}
.input-text{
  margin-left: 10%;
}
.input {
  width: 250px;
  height: 40px;
  border-radius: 5px;
  border: 2px solid var(--main-color);
  background-color: var(--bg-color);
  box-shadow: 4px 4px var(--main-color);
  font-size: 15px;
  font-weight: 600;
  color: var(--font-color);
  padding: 5px 10px;
  outline: none;
  margin-bottom: 10px;
}

.input::placeholder {
  color: black;
  opacity: 0.8;

}

.input:focus {
  border: 2px solid var(--input-focus);
}
.button-bag{
  display: flex;
  margin-top: 10%;
}
.button-back{

  width: 120px;
  height: 40px;
  border-radius: 5px;
  border: 2px solid var(--main-color);
  background-color: var(--bg-color);
  box-shadow: 4px 4px var(--main-color);
  font-size: 17px;
  font-weight: 600;
  color: var(--font-color);
  cursor: pointer;
}
.button-confirm {
  /*margin: 30px auto 0 auto;*/
  margin-left: 10%;
  width: 120px;
  height: 40px;
  border-radius: 5px;
  border: 2px solid var(--main-color);
  background-color: var(--bg-color);
  box-shadow: 4px 4px var(--main-color);
  font-size: 17px;
  font-weight: 600;
  color: var(--font-color);
  cursor: pointer;
}

</style>